<template>
  <div class="moodManagement">
    <el-card shadow="hover">
      <div>
        <h4>心情管理</h4>
        <div class="moodBox">
          <el-card
            class="item"
            v-for="i in moodList"
            :key="i.index"
            :body-style="{ 'background-color': i.color ? i.color : '' }"
          >
            <div class="bac" @click="editTitle(i)"></div>
            <i class="el-icon-close" @click="closeBtn(i.id)"></i>
            <p class="p">
              <img :src="i.icon" v-show="i.icon" />
              <span class="editTitle">{{ i.content }}</span>
            </p>
            <p>{{ i.score + "分" }}</p>
          </el-card>

          <el-card class="item" v-show="moodList.length != 12">
            <p class="p">
              <i class="el-icon-plus" @click="moodBtn"></i>
            </p>
            <p class="totalNum">{{ `(${moodList.length}/12)` }}</p>
          </el-card>
        </div>
      </div>
      <div>
        <h4>想做管理</h4>
        <div class="moodBox">
          <el-card
            class="item"
            v-for="i in wantList"
            :key="i.index"
            :body-style="{ 'background-color': i.color ? i.color : '' }"
          >
            <div class="bac" @click="editWantTitle(i)"></div>
            <i class="el-icon-close" @click="closeBtn(i.id)"></i>
            <p class="p">
              <img :src="i.icon" v-show="i.icon" />
              <span class="editTitle">{{ i.content }}</span>
            </p>
            <p>{{ i.score + "分" }}</p>
          </el-card>

          <el-card class="item" v-show="wantList.length != 9">
            <p class="p">
              <i class="el-icon-plus" @click="wantBtn"></i>
            </p>
            <p class="totalNum">{{ `(${wantList.length}/9)` }}</p>
          </el-card>
        </div>
      </div>

      <!-- 心情想做弹框 -->
      <el-dialog :title="title" :visible.sync="dialog" width="20%">
        <div class="addMoodBox">
          <p>
            <span class="moodSpan">内容</span
            ><el-input v-model="content" placeholder="请输入内容"></el-input>
          </p>
          <p class="colorP">
            <span class="moodSpan">背景颜色</span
            ><el-input v-model="color" placeholder="请输入背景颜色"></el-input>
            <el-color-picker v-model="color"></el-color-picker>
          </p>
          <p>
            <span class="moodSpan">分数</span
            ><el-input
              v-model="score"
              placeholder="请输入分数"
              oninput="value=value.replace(/[^\d]/g,'')"
            ></el-input>
          </p>
          <p>
            <span class="moodSpan">图标</span>
            <el-upload
              class="avatar-uploader"
              :http-request="upLoad"
              :on-preview="handlePictureCardPreview"
              :on-success="handleAvatarSuccess"
              :show-file-list="false"
              action
            >
              <img
                v-if="dialogImageUrl"
                :src="dialogImageUrl"
                class="avatar"
                style="width: 80px; height: 80px"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </p>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog = false">取 消</el-button>
          <el-button type="primary" @click="submitBtn">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 心情想做添加弹框 -->
      <!-- <el-dialog :title="addWantMood" :visible.sync="dialogWant" width="20%">
        <div class="addMoodBox">
          <p>
            <span class="moodSpan">想做内容</span
            ><el-input
              v-model="wantContent"
              placeholder="请输入想做内容"
            ></el-input>
          </p>
          <p class="colorP">
            <span class="moodSpan">背景颜色</span
            ><el-input
              v-model="wantColor"
              placeholder="请输入背景颜色"
            ></el-input>
            <el-color-picker v-model="wantColor"></el-color-picker>
          </p>
          <p>
            <span class="moodSpan">分数</span
            ><el-input
              v-model="wantFraction"
              placeholder="请输入分数"
            ></el-input>
          </p>
          <p>
            <span class="moodSpan">图标</span>
            <el-upload
              class="avatar-uploader"
              :http-request="upLoad"
              :on-preview="handlePictureCardPreview"
              :on-success="handleAvatarSuccess"
              :show-file-list="false"
              action
            >
              <img
                v-if="dialogImageUrlB"
                :src="dialogImageUrlB"
                class="avatar"
                style="width: 80px; height: 80px"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </p>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogWant = false">取 消</el-button>
          <el-button type="primary" @click="wantConfirmBtn">确 定</el-button>
        </span>
      </el-dialog> -->
    </el-card>
  </div>
</template>

<script>
import {
  moodandintendList,
  moodandintendAdd,
  moodandintendEdit,
  moodandintendDel,
} from "@/api/operationManagement";
import { client } from "@/utils/oss.js";
import { ossToken } from "@/api/NotificationManagement";

export default {
  inject: ["reload"],
  data() {
    return {
      //心情想做编辑弹框
      title: "添加心情", //弹框title
      id: "",
      content: "", //心情内容
      color: "", //背景颜色
      score: "", //分数
      icon: "",
      moodImageUrl: "", //图片网络地址
      dialogImageUrl: "", //图片本地地址
      moodList: [],
      dialog: false,
      type: "1",
      iswant: "",
      isAdd: true,
      //心情想做添加弹框
      // addWantMood: "添加想做", //添加弹框title
      // wantId: "",
      // wantContent: "", //心情内容
      // wantColor: "", //背景颜色
      // wantFraction: "", //分数
      // wantImageUrl: "", //图片
      // dialogImageUrlB: "",
      wantList: [],
      // dialogWant: false,
    };
  },
  methods: {
    moodandintendList() {
      //心情
      moodandintendList({
        page: 1,
        pageSize: 100,
        type: 1,
      }).then((res) => {
        if (res.code == 0) {
          this.moodList = res.data.list;
        }
      });
      //想做
      moodandintendList({
        page: 1,
        pageSize: 100,
        type: 2,
      }).then((res) => {
        if (res.code == 0) {
          this.wantList = res.data.list;
        }
      });
    },
    //编辑弹框信息回填
    editTitle(row) {
      this.id = row.id;
      this.content = row.content;
      this.color = row.color;
      this.dialogImageUrl = row.icon;
      this.score = row.score;
      this.dialog = true;
      this.title = "编辑心情";
      this.iswant = false;
      this.isAdd = false;
    },
    //心情确认按钮弹框
    submitBtn() {
      if (this.iswant) {
        this.type = "2";
      } else {
        this.type = "1";
      }
      if (this.content == "" || this.color == "" || this.score == "") {
        this.$message({
          type: "error",
          message: "内容，背景色或分数不能为空！",
        });
        return;
      }
      if (this.isAdd) {
        //添加
        moodandintendAdd({
          type: this.type,
          content: this.content,
          color: this.color,
          icon: this.moodImageUrl,
          score: this.score,
        }).then((res) => {
          if (res.code == 0) {
            this.$message({
              message: "  添加成功",
              type: "success",
            });
            this.reload();
            this.dialog = false;
          }
        });
      } else {
        //编辑
        moodandintendEdit({
          id: this.id,
          content: this.content,
          color: this.color,
          icon: this.moodImageUrl,
          score: this.score,
        }).then((res) => {
          if (res.code == 0) {
            this.$message({
              message: "编辑成功",
              type: "success",
            });
            this.reload();
            this.dialog = false;
          }
        });
      }
    },
    //心情添加弹框
    moodBtn() {
      this.dialog = true;
      this.id = "";
      this.content = "";
      this.color = "";
      this.dialogImageUrl = "";
      this.score = "";
      this.icon = "";
      this.title = "添加心情";
      this.iswant = false;
    },
    //想做弹框信息回填
    editWantTitle(row) {
      this.id = row.id;
      this.content = row.content;
      this.color = row.color;
      this.dialogImageUrl = row.icon;
      this.score = row.score;
      // this.dialogWant = true;
      this.dialog = true;
      this.title = "编辑想做";
      this.iswant = true;
      this.isAdd = false;
    },
    //想做确认按钮弹框
    wantConfirmBtn() {
      // moodandintendAdd({
      //   id: this.wantId,
      //   content: this.wantContent,
      //   color: this.wantColor,
      //   icon: this.moodImageUrl,
      //   score: this.wantFraction,
      // }).then((res) => {
      //   if (res.code == 0) {
      //     this.$message({
      //       message: "编辑成功",
      //       type: "success",
      //     });
      //     this.reload();
      //     this.dialogWant = false;
      //   }
      // });
      moodandintendAdd({
        type: this.type,
        content: this.moodContent,
        color: this.moodColor,
        icon: this.moodImageUrl,
        score: this.moodFraction,
      }).then((res) => {
        if (res.code == 0) {
          this.$message({
            message: "  添加成功",
            type: "success",
          });
          this.reload();
          this.dialogMood = false;
        }
      });
    },
    //想做添加弹框
    wantBtn() {
      this.id = "";
      this.content = "";
      this.color = "";
      this.dialogImageUrl = "";
      this.moodImageUrl = "";
      this.icon = "";
      this.score = "";
      this.dialog = true;
      this.title = "添加想做";
      this.iswant = true;
      this.isAdd = true;
    },
    //卡片关闭
    closeBtn(i) {
      console.log(i);
      this.$confirm("此操作将删除该卡片, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          moodandintendDel({ id: i }).then((res) => {
            if (res.code == 0) {
              this.$message({
                type: "success",
                message: "删除成功",
              });
              this.moodandintendList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleAvatarSuccess(res, file) {
      this.dialogImageUrl = URL.createObjectURL(file.raw);
      this.dialogImageUrlB = URL.createObjectURL(file.raw);
    },
    //覆盖默认的上传行为，自定义上传的实现
    async upLoad(file) {
      await ossToken({
        type: 0,
      }).then((res) => {
        if (res.code == 0) {
          this.dataObj = {
            accessKeyId: res.data.accessKey,
            accessKeySecret: res.data.accessSecret,
            securityToken: res.data.token,
            region: "oss-" + res.data.regionId,
            bucket: res.data.bucket,
          };
        }
      });
      const self = this;
      try {
        let fileNames =
          "/img/" +
          Math.round(new Date() / 1000) +
          "." +
          file.file.name.substring(file.file.name.lastIndexOf(".") + 1);
        this.moodImageUrl = fileNames;
        //fileNames上传文件的名称
        //file.file上传文件的内容
        let cli = client(this.dataObj);
        let result = cli.multipartUpload(fileNames, file.file);
        self.$message({
          message: "上传成功",
          type: "success",
        });
      } catch (e) {
        self.$message.error("上传失败");
      }

      // let files = file.file,
      //   point = files.name.lastIndexOf("."),
      //   suffix = files.name.substr(point),
      //   fileName = files.name.substr(0, point),
      //   date = Date.parse(new Date()),
      //   // fileNames = "/img/" + file.file.name;
      //   fileNames =
      //     "/img/" +
      //     Math.round(new Date() / 1000) +
      //     "." +
      //     file.file.name.substring(file.file.name.lastIndexOf(".") + 1);
      // console.log(fileNames);
      // // console.log(file.file.name.substring(file.file.name.lastIndexOf(".")+1));
      // this.imageUrl = fileNames;
      // //fileNames上传文件的名称
      // //file.file上传文件的内容
      // client(this.dataObj)
      //   .multipartUpload(fileNames, file.file)
      //   .then((result) => {
      //     //下面是如果对返回结果再进行处理，根据项目需要
      //     self.$message({
      //       message: "上传成功",
      //       type: "success",
      //     });
      //   })
      //   .catch((err) => {
      //     self.$message.error("上传失败");
      //   });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogImageUrlB = file.url;
    },
  },
  created() {
    this.moodandintendList();
  },
};
</script>

<style lang="less" >
.moodManagement {
  margin: 30px;
  height: 100%;
  .moodBox {
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 150px;
      height: 80px;
      text-align: center;
      margin-right: 50px;
      margin-bottom: 20px;
      position: relative;
      overflow: visible;
      .bac {
        width: 150px;
        height: 80px;
        position: absolute;
        left: 0;
      }
      .el-card__body {
        padding: 0px !important;
        border-radius: 6px;
      }
      .p {
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 20px;
          height: 20px;
          margin-right: 4px;
        }
      }
      p {
        margin: 0 !important;
        padding: 16px 0 5px;
      }
      .el-icon-close {
        position: absolute;
        right: -10px;
        top: -5px;
        cursor: pointer;
        transition: all 0.6s;
        font-weight: 700;
        font-size: 20px;
      }
      .el-icon-close:hover {
        transform: scale(1.3);
      }
      .el-icon-plus {
        font-size: 22px;
        cursor: pointer;
        transition: all 0.6s;
      }
      .el-icon-plus:hover {
        transform: scale(1.3);
      }
      .editTitle {
        cursor: pointer;
      }
      .editTitle:hover {
        color: #ec6564;
      }
    }
  }
  .el-dialog {
    .addMoodBox {
      p {
        display: flex;
        .moodSpan {
          width: 80px;
          line-height: 40px;
        }
        .avatar-uploader .el-upload {
          border: 1px dashed #d9d9d9;
          border-radius: 6px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
          border-color: #409eff;
        }
        .avatar-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          width: 80px;
          height: 80px;
          line-height: 80px;
          text-align: center;
        }
        .avatar {
          width: 80px;
          height: 80px;
          display: block;
        }
      }
      .colorP {
        position: relative;
        .el-color-picker {
          position: absolute;
          right: 0px;
        }
      }
    }
  }
}
</style>